<!DOCTYPE HTML>
<html lang="en-gb">
  <head>
  	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>Video player example</title>
  	<link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="player">
      <video controls>
        <source src="video/sintel-short.mp4" type="video/mp4" />
        <source src="video/sintel-short.webm" type="video/webm" />
        <!-- fallback content here -->
      </video>
      <div class="controls">
        <button class="play" data-icon="P" aria-label="play pause toggle"></button>
        <button class="stop" data-icon="S" aria-label="stop"></button>
        <div class="timer">
          <div></div>
          <span aria-label="timer">00:00</span>
        </div>
        <button class="rwd" data-icon="B" aria-label="rewind"></button>
        <button class="fwd" data-icon="F" aria-label="fast forward"></button>
      </div>
    </div>
    <p>Sintel &copy; copyright Blender Foundation | <a href="https://studio.blender.org/films/sintel/">studio.blender.org/films/sintel/</a>.</p>
    <script src="custom-player.js"></script>
  </body>
</html>
